<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        #modal{
            height: 200px;
            width: 200px;
            line-height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="open">打开弹窗</button>
    <button id="close">关闭弹窗</button>

    <script>
        // Modal 类可以实例化很多次 但有实例化一次  叫单例模式
        // 推迟 Modal 的实例化的时间 到第一次显示
        // 立即执行函数
        // 构建Modal类
        // 1.立即执行函数 + 返回函数
        //      函数嵌套函数 闭包
        // 2.有return  如果在构造函数中手动指定return new的高级用法
        //  仍然满足单例
        const Modal=(function(){
            let modal=null; // 该变量永生
            return function(){
                // 函数里找变量 作用域链的概念
                if (!modal){//第一次new 实例化
                    modal=document.createElement('div');
                    modal.id='modal';
                    modal.style.display='none';
                    modal.innerText='我是一个全局唯一的modal';
                    document.body.appendChild(modal);
                }

                return modal;

            }
        })();
        // const Modal = function() {
        //     //写dom ->body
        //     this.modalBox=document.createElement('div');
        //     this.modalBox.id='modal';
        //     this.modalBox.style.display='none';
        //     this.modalBox.innerText='我是一个全局唯一的modal'
        //     document.body.appendChild(this.modalBox);
                
        // }

        // let modal=new Modal();
        // let modal=null;

        // 点不点按钮 触发登录相关权限与否  modal 框 已经挂载到页面上了
        // 其实 modal不需要提前存在的
        // modal 第一次 生产+显示
        // 第二次后 只需要显示
        // let modal=document.createElement('div');
        // modal.id='modal';
        // modal.style.display='none';
        // modal.innerText='我是一个全局唯一的modal';
        // document.body.appendChild(modal);
        const openButton=document.getElementById('open'),
                closeButton=document.getElementById('close');

        //单例模式的概念 是无论实例化多少次 返回的都是原来的唯一实例
        openButton.addEventListener('click',function(){
            // 弹出框显示出来
            // modal =new Modal;
            let modal=new Modal();
            modal.style.display='block';
        })

        closeButton.addEventListener('click',function(){
            // 已经显示的弹出框隐藏掉
            let modal=new Modal();
            modal.style.display='none';
        })
    </script>
</body>
</html>